<template>
    <view class="page flex flex-center flex-column">
        <view class="w-100 p-4">
            <input type="text" v-model="form.code" class="bg-bg-grey rounded-round h8 font-weight-600 p-4 text-white" placeholder="卡密">
        </view>
        <view class="w-100 p-4 mt-10">
            <button class="bg-primary rounded-round text-white" @tap="submit">立即兑换</button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { $message,$http } from "@/utils";
import { useUserStore } from '@/stores';
const userStore = useUserStore();
const form = ref({
    code:''
})
const submit = () => {
    uni.showLoading({
        title:'兑换中',
        mask:true
    })
    $http.post('CardPassword/index',{
        data:form.value
    }).then((res:any)=>{
        if(res.code===$http.ResponseCode.SUCCESS){
            $http.get('User/info').then((res:any)=>{
                if(res.code===$http.ResponseCode.SUCCESS){
                    userStore.setUserInfo(res.data).catch(()=>{});
                }else if(res.code===$http.ResponseCode.NEED_LOGIN){
                    userStore.clearUserInfo();
                }
            }).catch(()=>{
            })
            uni.showModal({
                title:'兑换成功',
                content:res.msg,
                showCancel:false,
                success(){
                    uni.navigateBack();
                }
            })
        }else{
            $message.error(res.msg);
        }
    }).finally(()=>{
        uni.hideLoading();
    })
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: calc(100vh - var(--window-top));
}
</style>